<html>
<head>
<style><!--
.canvas1 {border: 1px solid #00f;}
-->
</style>
<script src="cchart.js"></script>
<script>
	function draw(){
		var pie1 = { "type": "pie",
				elements: [ {  "alpha": 0.6, "start-angle": 35,
							"tip": "#value# of #total#\n(#percent#)",
							"colours": [ "#1C9E05", "#FF368D", "#ffff00", "#cccccc" ],
							"values": [ 12, 3, 4, { "value": 6.5, "label": "hello (6.5)" } ]
							} ],
				"title": { "text": "Pie 1", style:{"text-align":"center", font: "bold 12px arial"} },
				"x_axis": null
			};

		var pie2 = { "type": "pie",
				elements: [ { "alpha": 0.6, "start-angle": 35, "animate": [ { "type": "fade", speed: 100 } ],
							"tip": "#value# of #total#\n(#percent#)",
							"colours": [ "#1C9E05", "#FF368D", "#ffff00", "#cccccc" ],
							"values": [ 12, 3, 4, { "value": 6.5, "label": "hello (6.5)" } ]
							} ],
				"title": { "text": "Pie 2 (Animate)", style:{"text-align":"center", font: "bold 12px arial"} },
				"x_axis": null
			};

		var pie3 = { "type": "pie", "3d": true,
				elements: [ {  "alpha": 0.6, "start-angle": 35,
							"tip": "#value# of #total#\n(#percent#)",
							"values": [ 12, 3, 4, { "value": 6.5, "label": "hello (6.5)" } ]
							} ],
				"title": { "text": "Pie 3 (3D)", style:{"text-align":"center", font: "bold 12px arial"} },
				"x_axis": null
			};
		var pie4 = { "type": "pie", "3d": true,
				elements: [ { "alpha": 0.6, "start-angle": 35, "animate": [ { "type": "fade", speed: 100 } ],
							"tip": "#value# of #total#\n(#percent#)",
							"colours": [ "#1C9E05", "#FF368D", "#ffff00", "#cccccc" ],
							"values": [ 12, 3, 4, { "value": 6.5, "label": "hello (6.5)" } ]
							} ],
				"title": { "text": "Pie 4 (3D Animate)", style:{"text-align":"center", font: "bold 12px arial"} },
				"x_axis": null
			};
		new CanvasChart("first", pie1, 300, 300);
		new CanvasChart("second", pie2);
		new CanvasChart("third", pie3, 300, 300);
		new CanvasChart("fourth", pie4);
	}
	function update4(){
		var pie4 = { "type": "pie", "3d": true,
				elements: [ { "alpha": 0.6, "start-angle": 35, "animate": [ { "type": "fade", speed: 100 } ],
							"tip": "#value# of #total#\n(#percent#)",
							"colours": [ "#1C9E05", "#FF368D", "#ffff00", "#cccccc" ],
							"values": [ 12, 13, 14, { "value": 16.5, "label": "hello (16.5)" } ]
							} ],
				"title": { "text": "Pie 4 (3D Animate)", style:{"text-align":"center", font: "bold 12px arial"} },
				"x_axis": null
			};
		new CanvasChart("fourth", pie4);
	}
</script>
</head>
<body onload="draw();">
	<span id="first" width="300"></span>&nbsp;&nbsp;
	<canvas id="second" width="400" height="300"></canvas>&nbsp;&nbsp;
	<span id="third"></span>&nbsp;&nbsp;
	<span id="fourth" width="300"><button onclick="update4()">Update</button></span>&nbsp;&nbsp;
</body>
</html>